<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header
        style="
          font-size: 40px;
          color: #409eff;
          background-color: rgb(238, 241, 246);
        ">
        ---北斗定点智能垃圾分拣机器人产品实时追踪平台---
      </el-header>

      <el-container>
        <el-main style="position: relative;">
          <el-image :src="src" style="width: 100%; height: 100%;"></el-image>

          <!-- 用户名和密码输入框容器 -->
          <div
            style="
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              background-color: rgba(255, 255, 255, 0.8);
              padding: 20px;
              border-radius: 10px;
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
              text-align: center;
            ">
            <el-input v-model="username" placeholder="请输入用户名" style="margin-bottom: 10px;"></el-input>
            <el-input v-model="password" placeholder="请输入密码" type="password" style="margin-bottom: 20px;"></el-input>
            <el-button type="primary" @click="login">登录</el-button>
          </div>
        </el-main>

        <el-footer>---全民参与垃圾分类，共享环保低碳生活---</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      username: "",
      password: "",
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('http://localhost:9000/login', {
          username: this.username,
          password: this.password
        });
        if (response.data.msg == "success") {
          //  从响应中获取 JWT 令牌，假设令牌在 response.data.token 中
          // const jwtToken = response.data.token; 
          //  将 JWT 令牌存储在本地存储中
          // localStorage.setItem('jwtToken', jwtToken); 
          alert('登录成功');
          this.$router.push('/main');
        } else {
          alert('用户名或密码错误');
        }
      } catch (error) {
        console.error('登录出错:', error);
        alert('登录失败，请稍后重试');
      }
    }
  }
}
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}
</style>